iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 4
1

第四天將接著昨日的內容繼續!
https://ithelp.ithome.com.tw/upload/images/20190908/20113277KVgCCWoMNd.png

第一次接觸React的朋友們可能心裡會os: "X! 這到底是甚麼語法,又像JS但又有HTML包在裡面。"別擔心,今天就要來為大家解惑,讓大家看懂React的語法。

前篇文章中有說過,React 是藉由 JS 產生 HTML ,如果使用原生JS寫法應該很快就會崩潰了吧,例如:

JSX

<a href="https://ithelp.ithome.com.tw">IT邦幫忙首頁</a>

換成原生 JS 需要這樣寫:

React.createElement('a', {href: 'https://ithelp.ithome.com.tw'}, 'IT邦幫忙首頁')

透過一行程式碼可能無法看出差別,但萬一專案變的複雜,父子元件慢慢增多時,原生JS絕對不是一個好的選擇。

這邊可以得出一個小結論:
React 可以用原生JS撰寫,但將會使程式難以閱讀與維護,因此建議使用JSX語法,最後再透過babel等工具轉換為正常JS。

JSX 怎麼寫?

其實如果熟悉HTML與JS的朋友應該可以快速上手JSX語法,HTML的語法基本上在JSX都是通用的,除了幾個比較特殊的地方要額外介紹:

  1. HTML 的 class 屬性在 JSX 須寫為 className (class 為 JSX 保留字)
<div className="testClass">Test</div>
  1. JSX中所有元素都需要關閉 例如:
<div>content</div> 或 <img /> (self-closing)
  1. 事件觸發需使用駝峰式命名,例:
<div onClick={() => console.log('click test'}>Click Me</div>
  1. style 屬性要以 JS 物件的格式撰寫,採用駝峰式命名法而非-,單位要用單引號包住 (例: '50%')。外面則要再加上一層大括號。 例:
<p style={{fontSize: '15px',marginTop: '20px'}}>Some text</p>
  1. 在JSX中仍然可以撰寫JS,但是需使用大括號包起來 (後面篇章會解說)
  2. 函式return需要由一個頂端tag包住內容,直接看以下範例
    以下語法不會出錯
const App = () => {
  return (
    <div className="App">
      This is my first react app!
    </div>
  );
}

以下語法則會報錯(沒有一個最外層包住所有內容的tag)

const App = () => {
  return (
    <p>some text</p>
    <div className="App">
      This is my first react app!
    </div>
  );
}

以上就是 JSX 的基本介紹,雖然JSX需要透過轉譯才能執行,但是create-react-app已經幫我們處理好這些設定了,我們就放心使用JSX語法吧!

Virtual DOM介紹

Virtual DOM,顧名思義,就是虛擬的DOM,以 JavaScript 物件模擬特定 DOM 結構而產生的樹狀結構。用途是不直接操作 DOM,因為直接操作DOM的成本可是非常昂貴的,因此改操作這些物件。最後再將變動的部分更新到真的DOM上,也就是期望達到更動最小數量的DOM,以此提升效能。

而React背後就實作了這個機制,React 希望在頁面資料更動時,能即時重新渲染頁面,讓頁面能呈現最新的資料,提升使用者體驗。但頁面重新渲染的成本可是非常高的,所以才需要 Virtual DOM 的幫忙,資料更動後先重新繪製 Virtual DOM,再與真實的 DOM 進行 Diff演算法比對 ,最後把有變動的部分改動到真實的DOM上,如此就比起直接重新渲染提高了許多效能,也降低了資料與頁面交互更動的複雜度。

https://ithelp.ithome.com.tw/upload/images/20190908/20113277TZ3EeDdpZj.png

上圖清楚呈現React頁面更動的機制,首先當頁面狀態更動後,Virtual DOM 與 真實DOM經過Diff比對後才會將真正變動的部分推上真實的DOM。

今天主要是以講解觀念為主,明天就會開始寫程式啦,也會介紹第一個 React hooks - useState ,明天見!


上一篇
【Day 3】CRA專案架構
下一篇
【Day 5】 第一個 hook - useState
系列文
React.js 從 【0】 到【1】推坑計畫 30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
yanzhong
iT邦新手 4 級 ‧ 2020-11-12 00:05:56

很清楚!!!

我要留言

立即登入留言